<template>
  <div class="fans">
    <el-card>
      <topcard>
        <template>
          粉丝管理
        </template>
      </topcard>
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="粉丝列表" name="first">
          <ul class="fansList">
            <li class="item" v-for="(item, index) in fansList" :key="index">
              <div class="img">
                <!-- 用户头像 -->
                <img :src="item.photo" alt="" />
                <!-- <img src="../../assets/error.gif" alt="" /> -->
              </div>
              <!-- 用昵称 -->
              <p>{{ item.name }}</p>
              <el-button class="myBtn" type="primary" plain size="small"
                >+关注</el-button
              >
            </li>
          </ul>
          <el-pagination
            class="pagination"
            background
            @current-change="handleCurrentChange"
            :current-page="pagination.currentPage"
            :page-size="20"
            layout=" prev, pager, next"
            :total="total"
          >
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="粉丝画像" name="second">
          <div ref="echarts" :style="{ width: '600px', height: '400px' }"></div
        ></el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
<script>
// 导入api
import { getFans, getFansData } from '../../api/fans'
import echarts from 'echarts'
export default {
  data () {
    return {
      activeName: 'first',
      fansList: [],
      pagination: {
        currentPage: 1
      },
      total: 0,
      // 粉丝画像
      data: []
    }
  },
  methods: {
    async getData () {
      const res = await getFans({
        page: this.pagination.currentPage
      })
      console.log(res)
      // 保存数据
      this.fansList = res.data.results
      // total
      this.total = res.data.total_count
    },
    // tab栏切换
    handleClick () {
      // console.log('1111')
      getFansData().then(res => {
        console.log(res)
        this.$nextTick(() => {
          var myChart = echarts.init(this.$refs.echarts)
          // 指定图表的配置项和数据
          var option = {
            tooltip: {},
            xAxis: {
              type: 'category',
              data: [
                '小于18岁',
                '小于23岁',
                '小于30岁',
                '小于40岁',
                '小于50岁',
                '大于50岁'
              ]
            },
            yAxis: {
              type: 'value'
            },
            series: [
              {
                data: [
                  res.data.age.le18,
                  res.data.age.le23,
                  res.data.age.le30,
                  res.data.age.le40,
                  res.data.age.le50,
                  res.data.age.gt50
                ],
                type: 'bar',
                showBackground: true,
                backgroundStyle: {
                  color: 'rgba(220, 220, 220, 0.8)'
                }
              }
            ]
          }

          // 使用刚指定的配置项和数据显示图表。
          myChart.setOption(option)
        })
      })
    },
    // 页码改变
    async handleCurrentChange (page) {
      // console.log(page)
      this.pagination.currentPage = page
      // console.log(this.pagination.currentPage)
      await this.getData()
    }
  },
  async created () {
    // 获取粉丝列表
    await this.getData()
  }
}
</script>
<style lang="less">
.fans {
  min-height: 100vh;
  .el-tabs {
    margin-top: 20px;
  }
  .pagination {
    text-align: center;
  }
  .fansList {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    .item {
      list-style: none;
      text-align: center;
      width: 120px;
      height: 170px;
      border: 1px dashed #e5e5e5;
      margin-bottom: 20px;
      margin-right: 30px;
      .img {
        margin: 0 auto;
        margin-top: 10px;
        width: 80px;
        height: 80px;
        border-radius: 50%;
        overflow: hidden;
        background: url(../../assets/error.gif) 100px -80px;
        background-size: cover;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      p {
        margin: 0;
        padding: 10px 5px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>
